<template>
	<view class="pad-30">
		<view class="color-primary text-center font-24 mar-bottom-20">只有您和上门服务的工作人员能看到此内容</view>
		<up-form labelPosition="top" labelWidth="200rpx" :model="formData" :rules="rules" ref="ruleFrom">
			<up-form-item label="文字描述" prop="content">
				<up-textarea v-model="formData.content" placeholder="描述你和工人关于服务内容的更改的协商内容、备注等" countmaxlength="100"
					placeholderClass="input-style"></up-textarea>
			</up-form-item>
			<up-form-item label="图片(最多9张)">
				<view>
					<view class="font-24 mar-bottom-10 color-warning">如果出现对服务不满意等情况，可以作为依据</view>
					<up-upload width="214rpx" height="220rpx" :fileList="fileList" @afterRead="afterRead"
						@delete="deletePic" name="1" multiple :maxCount="9"></up-upload>
				</view>
			</up-form-item>
		</up-form>

		<view class="button-bottom centerXY">
			<view @click="hanldeSubmit" class="btn font-32 mar-left-20 button-style">发布</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';

	import {
		FILE_URL
	} from '@/common/config';

	import {
		orderTrendsAdd
	} from '@/api/index.js'

	import {
		onLoad
	} from '@dcloudio/uni-app'

	// 接收参数
	const props = ref({});
	onLoad((option) => {
		if (option.order_no) {
			props.value = option;
		}
	})

	const formData = reactive({
		content: '',
		pics: [],
	});

	// 删除图片
	const deletePic = () => {
		fileList1.value.splice(event.index, 1);
	}

	// 新增图片
	const fileList = ref([]);
	const afterRead = async (event) => {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = fileList.value.length;
		lists.map((item) => {
			fileList.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			let item = fileList.value[fileListLen];
			fileList.value.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: result.url,
			});
			fileListLen++;
		}
	};


	let client = "";
	// #ifdef APP-PLUS
	const systemInfo = uni.getSystemInfoSync();
	if (systemInfo.platform === 'android') {
		client = 'android'
	} else if (systemInfo.platform === 'ios') {
		client = 'ios'
	} else if (systemInfo.platform === 'h5') {
		client = 'h5'
	} else {

	}
	// #endif
	// #ifdef MP-WEIXIN
	client = 'wx_mini'
	// #endif


	let header = {
		'w-token': uni.getStorageSync('jwt_token').token || '',
		'w-client-lang': 'zh_CN',
		'w-client-os': client,
		'w-client-version': '1.0.0',
		'w-client-business': '1',
		"w-client-id": uni.getStorageSync('wClientId')
	}

	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			console.log(url)
			let a = uni.uploadFile({
				url: FILE_URL + '/file/upload/one', // 仅为示例，非真实的接口地址
				filePath: url,
				header,
				name: 'file',
				success: (res) => {
					setTimeout(() => {
						resolve(JSON.parse(res.data).data);
					}, 1000);
				},
			});
		});
	};


	// 表单校验规则
	const ruleFrom = ref(null);
	const rules = ref({
		content: [{
			required: true,
			message: '请输入你的动态',
			trigger: 'blur'
		}],
	})

	const hanldeSubmit = async () => {
		formData.pics = fileList.value.map(item => {
			return item.url;
		})
		formData.order_no = props.value.order_no

		// 提交数据
		ruleFrom.value.validate().then(async valid => {
			if (valid) {
				orderTrendsAdd(formData).then(res => {
					uni.$u.toast(res.msg);
					setTimeout(() => {
						uni.navigateBack();
					}, 1000)
				})
			}
		})
	}
</script>

<style scoped>
	.button-bottom {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		background: white;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		z-index: 2;
	}

	.btn {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
	}
</style>